<template>
  <div id="miniProgram">
    <h1 class="con-right-title">
      分享素材
    </h1>
    <topSearch
      ref="search"
      :form-inline="formInline"
      @toSearch="toSearch"
    ></topSearch>
    <!-- 操作按钮 -->
    <div class="table-conBtn">
      <el-button type="warning" plain @click="handleComplain('add')">
        新增学院素材
      </el-button>
      <freshCom @searchList="toSearch"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table :data="tableData" style="width: 100%" ref="table">
      <el-table-column type="index" width="60" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="liveChannelId"
        label="直播间频道号"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="title" label="章节" min-width="100" align="center">
      </el-table-column>
      <el-table-column label="直播时间" min-width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.startTime | formatDateMinute }}~{{
            scope.row.finishTime | formatDateMinute
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="user.nickname"
        label="负责讲师"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" min-width="100" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleComplain('edit', scope.row)">
            配置
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="fetchData"
    ></pageCom>
    <!-- 添加\编辑学院弹窗 -->
    <handle-dialog
      v-if="handleDialogData.isShow"
      :handle-dialog-data="handleDialogData"
      @refreshList="refreshList"
    ></handle-dialog>
  </div>
</template>
<script>
import topSearch from '@component/miniProgram/topSearch' // 上部搜索条件
import handleDialog from '@component/miniProgram/handleDialog'
import { filterImageMixins } from '@/mixins/filterImage'
import { saveScrollMixins } from '@/mixins/saveScroll'
import {
  getCollegeList,
  getChapterCourseList,
  getChaptersDetail,
  getCollegeDetail
} from '@/api/applet'

export default {
  name: 'set',
  msg: '体验课小程序分享素材配置',
  mixins: [filterImageMixins, saveScrollMixins],
  components: {
    handleDialog,
    topSearch
  },
  data() {
    return {
      tableData: [],
      total: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      handleDialogData: {
        isShow: false,
        params: '',
        type: '',
        title: ''
      },
      id: '',
      exportData: [],
      formInline: {
        collegeId: '',
        title: '',
        startDate: '',
        endDate: '',
        createTime: [],
        collegeList: []
      }
    }
  },
  mounted() {
    this.getCollegeListData()
    this.fetchData()
  },
  methods: {
    // 获取学院数据
    getCollegeListData() {
      getCollegeList(
        (response) => {
          this.formInline.collegeList = response
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 获取列表数据
    fetchData() {
      let params = { ...this.searchParams, ...this.formInline }
      delete params.createTime
      delete params.collegeList
      getChapterCourseList(
        params,
        (response) => {
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    toSearch() {
      this.searchParams.pageNum = 1
      this.fetchData()
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.fetchData()
    },
    // 新增学院配置/编辑章节配置
    handleComplain(type, row) {
      if (type === 'add') {
        if (this.$refs.search.formInline.collegeId) {
          const collegeData = this.$refs.search.formInline.collegeList.filter(
            (item) => item.id === this.$refs.search.formInline.collegeId
          )
          getCollegeDetail(
            collegeData[0].id,
            (response) => {
              this.handleDialogData.isShow = true
              this.handleDialogData.title = collegeData[0].name
              this.handleDialogData.type = type
              this.handleDialogData.params = response
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        } else {
          this.$message.error('请选择学院')
        }
      } else {
        let params = {
          courseId: row.courseId,
          chapterId: row.id
        }
        getChaptersDetail(
          params,
          (response) => {
            this.handleDialogData.isShow = true
            this.handleDialogData.params = response
            this.handleDialogData.title = row.title
            this.handleDialogData.type = type
          },
          (response) => {
            this.$message({
              message: response.message,
              type: 'warning'
            })
          }
        )
      }
    },
    refreshList() {
      this.searchParams.pageNum = 1
      this.fetchData()
    }
  }
}
</script>
<style lang="less">
#miniProgram {
  .img-box {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    border: 1px solid #ddd;

    .img-inner-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      text-align: center;

      .el-image {
        width: 100%;
        height: 100%;
      }

      img {
        max-width: 100%;
        max-height: 100%;
        cursor: pointer;
      }
    }

    .num {
      position: absolute;
      display: block;
      bottom: 0;
      right: 0;
      width: 16px;
      height: 16px;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      font-size: 12px;
      text-align: center;
      line-height: 16px;
    }
  }
}
</style>
